<!-- 
* 	作者：黄俊文，
* 	时间：2019-07-08
* 	组件名称：表单卡片
* 	组件介绍：
* 			{
						title:"单位名称",	//标题内容
						value:'',	//获取的值
						titleColor:"#788299",		//标题颜色
						isTCenter:true,	//标题是否不居中显示，默认 (不填为/false) 居中显示
						isSign:false,	//是否标记星星
						isTitleColon:true,	//是否显示标题冒号
						type:"input",	//checkbox/radio/input/textarea/picker
						mode:'',// type=picker时需要的参数，selector(普通)/multiSelector(多列)/time(时间)/date(日期)/region(省市区:H5不兼容)/multTime(多列时间选择)
						isInputClick:false,// 输入框是否可点击
						isDisabled:false,	//是否禁止
						width:30,	//标题所占宽度 %
						inputStyle:{	//input输入框样式
							placeholderText:"请录入",		//默认显示内容
							type:"text",	//input输入框拉起键盘类型：text（拼音键盘） , number（数字键盘） , idcard（身份证雅正键盘）
							maxlength:11,
							isPassword:false,	//是否是密码类型
							isFocus:false,	//是否获取焦点
							isAutoHeight:false
						},
						rStyle:{	//input输入框 右侧 样式
							type:"button",	//图标：icon/uniIcon,文本：text ,按钮：button
							text:"发送验证码",	//显示内容
							butBackground:"#5bd1b9",	//按钮背景颜色
							color:"#FFFFFF",	//字体颜色
							fontSize:30,
							iconName:'sanjiaojiantoutriangular',
							butTime:60,		//点击后按钮倒计时
							isVerificationCode:true,	//是否是发送验证码按钮
							isClick:false,
							isButLoading:false,		//点击后是否显示加载
							isButDisabled:true	//点击后是否禁止点击
						},
						picker:[
							['1','2']
						],
						optionBoxs:[	//选项框 样式
							{
								text:"连锁",	//显示值
								value:"liansuo",	//隐藏值
								boxSize:0.7,	// 范围：0.5~1
								isBoxCheck:false,	//是否选中
								isBoxDisabled:false,		//是否禁止
								boxColor:"#5bd1b9"	//选中后样式颜色
							}
						]
					}
					* 
	-----------------------------------------------------------------
	* 协议勾选组件
	* 				{
						type:"agreement",	//类型参数
						agreement:{		//协议参数
							agreementUrl:'',	//协议详情页面地址
							isChecked:false,	//是否初始化选中
							agreementColor:'#5BD1B9',	协议字体颜色
							agreementText:'《牙科联盟用户协议》',	//协议内容
							checkboxSize:0.7  	//复选框大小
						}
					}
* 
*  -->


<template>
	<view>
		<checkbox-group v-if="cardItem.type==='agreement'" :data-id="zcIndex" @change="zcAgreementChenge" class="agreementCheckbox uni-flex zcFlex_row zcAlignI_center zcJustifyC_center">
			<label class="checkbox uni-flex zcFlex_row zcAlignI_center">
				<checkbox :value="''+cardItem.agreement.isChecked" :color="cardItem.agreement.agreementColor" :checked="cardItem.agreement.isChecked" :style="{'transform': 'scale('+cardItem.agreement.checkboxSize+')'}"/>
				我已阅读并同意
			</label>
			<navigator url="" :style="{'color': cardItem.agreement.agreementColor}">{{cardItem.agreement.agreementText}}</navigator>
		</checkbox-group>
		
		<view v-else class="card_model" v-show="cardItem.isShow === false?false:true">
			<view class="card_item uni-flex">
				<view class="card_item_name uni-flex" :class="{'zcAlignI_center':!cardItem.isTCenter,'zcAlignI_center1':cardItem.isTCenter}" :style="{'flex-shrink':'0','width':cardItem.width+'%'}">
					<view class="uni-flex iconfont icon-stars" v-show="cardItem.isSign"></view>
					<view :style="{'color':cardItem.titleColor}">{{cardItem.title}}</view>
                    <view style="padding: 0 10upx;color: #3CA4F9;" v-if="cardItem.isChangeValue">({{cardItemNumber}})</view>
					<view style="padding: 0 10upx;" v-show="cardItem.isTitleColon">:</view>
				</view>
				<view v-if="cardItem.type==='input'" class="card_item_text uni-flex zcAlignI_center">
					<input
					:data-id="zcIndex" 
					type="text" 
					:value="cardItem.value"
					:disabled="true"
					:placeholder="cardItem.inputStyle.placeholderText"
					v-if="cardItem.isInputClick"
					@tap="zcInputClick" 
					placeholder-style="color:#cac5c5;" />
                    <input
                    :data-id="zcIndex" 
                    :focus="cardItem.inputStyle.isFocus" 
                    :type="cardItem.inputStyle.type?cardItem.inputStyle.type:'text'" 
                    :password="cardItem.inputStyle.isPassword"
                    :placeholder="cardItem.inputStyle.placeholderText"
                    :value="cardItem.value"
                    :disabled="cardItem.isDisabled"
                    :maxlength="cardItem.inputStyle.maxlength?cardItem.inputStyle.maxlength:'140'"
                    v-else-if="cardItem.isChangeValue"
                    @input="zcInputValue"
                    @blur="zcChengeValue"
                    placeholder-style="color:#cac5c5;" />
					<input
					:data-id="zcIndex" 
					:focus="cardItem.inputStyle.isFocus" 
					:type="cardItem.inputStyle.type?cardItem.inputStyle.type:'text'" 
					:password="cardItem.inputStyle.isPassword"
					:placeholder="cardItem.inputStyle.placeholderText"
					:value="cardItem.value"
					:disabled="cardItem.isDisabled"
					:maxlength="cardItem.inputStyle.maxlength?cardItem.inputStyle.maxlength:'140'"
					v-else
					@blur="zcChengeValue"
					placeholder-style="color:#cac5c5;" />
                    
					
					<button 
					v-if="cardItem.rStyle.type==='button'" 
					:style="{'color':cardItem.rStyle.color,'backgroundColor':cardItem.rStyle.butBackground,'fontSize':cardItem.rStyle.fontSize+'rpx'}" 
					class="card_item_but uni-flex zcAlignI_center zcJustifyC_center" 
					:disabled="cardItem.rStyle.isButDisabled" 
					:data-id="zcIndex" @tap="zcChengeBut" 
					style="height: 70upx;">
						{{!cardItem.rStyle.isButDisabled?'':!cardItem.rStyle.isButLoading?butTime:''}}{{cardItem.rStyle.text}}
					</button>
					
					<view 
					v-if="cardItem.rStyle.type==='icon'" 
					:data-id="zcIndex"
					:class="['iconfont','icon-'+cardItem.rStyle.iconName]" 
					@tap="zcChengeIcon"
					:style="{'color':cardItem.rStyle.color,'fontSize':cardItem.rStyle.fontSize+'rpx','padding':'0 16upx'}">
					</view>
					<view
					v-if="cardItem.rStyle.type==='uniIcon'" 
					:data-id="zcIndex"
					:class="['uni-icon','uni-icon-'+cardItem.rStyle.iconName]" 
					@tap="zcChengeIcon"
					:style="{'color':cardItem.rStyle.color,'fontSize':cardItem.rStyle.fontSize+'rpx','padding':'0 16upx'}">
					</view>
				</view>
				<view v-if="cardItem.type==='inputChange'" class="card_item_text uni-flex zcAlignI_center">
					<input 
					:data-id="zcIndex"
					:type="cardItem.inputStyle.type?cardItem.inputStyle.type:'text'" 
					:password="cardItem.inputStyle.isPassword"
					:placeholder="cardItem.inputStyle.placeholderText"
					:value="cardItem.value"
					:disabled="cardItem.isDisabled"
					:maxlength="cardItem.inputStyle.maxlength?cardItem.inputStyle.maxlength:'140'"
					
					@input="zcChengeValue"
					placeholder-style="color:#cac5c5;" />
				</view>
				<view v-if="cardItem.type==='picker'" class="card_item_text uni-flex zcAlignI_center">
					<picker :data-id="zcIndex" :disabled="cardItem.isDisabled" v-if="cardItem.mode == 'selector' || cardItem.mode == 'multiSelector'" :mode="cardItem.mode" :range="cardItem.picker" @change="zcChengeValue">
						<view v-if="cardItem.picker[cardItem.value]" class="uni-input">{{cardItem.picker[cardItem.value]}}</view>
                        <view v-else-if="cardItem.isPlaceholder" class="uni-input placeholder">必填</view>
					</picker>
					<picker @change="multTimeChenge" :disabled="cardItem.isDisabled" :data-id="zcIndex" v-else-if="cardItem.mode == 'multTime'" mode="multiSelector" :value="[hour,0,min,0,hour,0,min]" :range="timeRang">
						<view class="uni-input">{{cardItem.value}}</view>
					</picker>
					<picker @change="zcChengeValue" :disabled="cardItem.isDisabled" :data-id="zcIndex" v-else-if="cardItem.mode == 'year'" mode="date" fields='year' >
						<view class="uni-input">{{cardItem.value}}</view>
					</picker>
					<picker v-else :data-id="zcIndex" :value="cardItem.value" :disabled="cardItem.isDisabled" :mode="cardItem.mode" @change="zcChengeValue">
						<view class="uni-input">{{cardItem.value}}</view>
					</picker>
					
					<view 
					v-if="cardItem.rStyle.type==='icon'" 
					:class="['iconfont','icon-'+cardItem.rStyle.iconName]" 
					:style="{'color':cardItem.rStyle.color,'fontSize':cardItem.rStyle.fontSize+'rpx','padding':'0 16upx'}">
					</view>
				</view>
				
				<view v-if="cardItem.type==='popup'" class="card_item_text uni-flex zcAlignI_center">
					<input 
					@tap="isClosePopup"
					:data-id="zcIndex" 
					:value="cardItem.value"
					type="text"
					:disabled="true"
					placeholder="请选择"
					placeholder-style="color:#cac5c5;" />
				</view>
				
				<view v-if="cardItem.type==='textarea'" class="card_item_text uni-flex zcAlignI_center">
					<textarea v-if="isAtext" :focus="isAFocus" :show-confirm-bar="false" :data-id="zcIndex" :value="cardItem.value" :placeholder="cardItem.inputStyle.placeholderText" @blur="zcChengeATextValue" :auto-height="cardItem.inputStyle.isAutoHeight" style="width: 100%;height: 100%;line-height: 1.2;font-size: inherit;" :disabled="cardItem.isDisabled" />
					<view v-else-if="!isAtext" :style="{'color':cardItem.isDisabled?'#999999':'#333333'}" style="width: 100%;height: 100%;line-height: 1.2;min-height: 50rpx;font-weight: normal;" @tap="zcTapATextValue()" >{{cardItem.value?cardItem.value:''}}</view>
					
				</view>
				
				<view class="card_item_text uni-flex zcAlignI_center" v-if="cardItem.type==='checkbox'">
					<checkbox-group :data-id="zcIndex" @change="zcChengeValue" class="uni-flex zcFlex_row zcAlignI_center">
						<block v-for="(item,idx) in cardItem.optionBoxs" :key="idx">
							<label class="checkbox">
								<checkbox :value="item.value" :color="item.boxColor" :background="item.boxBackground" :disabled="cardItem.isDisabled" :checked="item.isBoxCheck" :style="{'transform':'scale('+item.boxSize+')',}"/>{{item.text}}
							</label>
						</block>
					</checkbox-group>
				</view>
				
				<view class="card_item_text uni-flex zcAlignI_center" v-if="cardItem.type==='radio'">
					<radio-group :data-id="zcIndex" @change="zcChengeValue" class="uni-flex zcFlex_row zcAlignI_center">
						<block  v-for="(item,idx) in cardItem.optionBoxs" :key="idx">
							<label class="radio">
								<radio :value="item.value" :color="item.boxColor" :background="item.boxBackground" :disabled="cardItem.isDisabled" :checked="cardItem.value===item.text" :style="{'transform':'scale('+item.boxSize+')',}"/>{{item.text}}
							</label>
						</block>
					</radio-group>
				</view>
			</view>
		</view>
	
		
	</view>
</template>

<script>
	export default {
		props:{
			cardItem:Object,
			zcIndex:Number
		},
		data() {
			return {
				isClick:false,
				isAtext:false,
				isAFocus:false,
				butTime:60,
				timer:0,
				hour:0,
				min:0,
				timeRang:[
					['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
					[':'],
					[
						'00',
						'30'
					],
					['-'],
					['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
					[':'],
					[
						'00',
						'30'
					]
				],
				cardItemNumber:0,
			}
		},
		created() {
			this.cardItemNumber = this.$props.cardItem.number;
		},
        watch:{
            cardItem() {
                this.cardItemNumber = this.$props.cardItem.number;
            }
        },
		mounted() {
			const date = new Date();
			this.hour = date.getHours();
			this.min = date.getMinutes();
		},
		methods:{
			zcChengeValue(res) {
				// console.log('res =',res);
				let id = '';
				id = parseInt(res.target.dataset.id);
				
				this.atextVal = '';
				let obj = {
					id: id,
                    number: this.cardItemNumber,
					value: res.detail.value
				}
				
				this.$emit('zcChengeValue',obj);
			},
            zcInputValue(res) {
                let id = '';
                id = parseInt(res.target.dataset.id);
                
                this.atextVal = '';
                let obj = {
                	id: id,
                	value: res.detail.value.length
                }
                this.cardItemNumber = res.detail.value.length;
            },
			zcChengeATextValue(res) {
				let id = '';
				id = parseInt(res.target.dataset.id);
				
				this.isAtext = false;
				this.isAFocus = false;
				let obj = {
					id: id,
					value: res.detail.value
				}
				
				this.$emit('zcChengeValue',obj);
			},
			zcTapATextValue() {
				if (this.cardItem.isDisabled) {
					return;
				}
				this.isAtext = true;
				let _this = this;
				setTimeout(()=>{
					_this.isAFocus = true;
				},500)
			},
			zcInputClick(res) {
				// console.log('res =',res);
				let id = '';
				id = parseInt(res.target.dataset.id);
				let obj = {
					id: id
				}
				this.$emit('zcInputClick',obj);
			},
			zcAgreementChenge(res) {
				// console.log('res =',res);
				let obj = {
					id: parseInt(res.target.dataset.id),
					value: false
				}
				if (res.detail.value.length > 0) {
					obj.value = true;
				}
				this.$emit('zcAgreementChenge',obj);
			},
			zcChengeIcon(res) {	//点击右侧图标按钮
				let obj = {
					id: parseInt(res.target.dataset.id),
					value: ''
				}
				this.$emit('zcChengeIcon',obj);
			},
			zcChengeBut(res) {
				let _this = this;
				
				_this.butTime = 60;
				clearInterval(_this.timer);
				
				let obj = {
					id: parseInt(res.target.dataset.id),
					value:{}
				}
				
				// _this.isClick = true;	
				// _this.$props.cardItem.isDisabled = true;
				setTimeout(() => { this.$emit('zcChengeBut',res); }, 1000);
				// this.$emit('zcChengeBut',res);
				// _this.text = "重新发送";
				
				
				_this.timer = setInterval(function() {
					
					if (_this.butTime !== 0) {
						_this.butTime -= 1;
					}
					if (_this.butTime == 0) {
						clearInterval(_this.timer);
						_this.butTime = 60;
						_this.isClick = false;
						_this.$emit('zcChengeBut',true);
					}
				},1000)
				
			},
			multTimeChenge(res) {
				// console.log('multTime=',res);
				let id = '';
				let timed = this.timeRang[0][res.detail.value[0]]+':'+this.timeRang[2][res.detail.value[2]]+'-'+this.timeRang[4][res.detail.value[4]]+':'+this.timeRang[6][res.detail.value[6]]
				id = parseInt(res.target.dataset.id);
				let obj = {
					id: id,
					value: timed
				}
				
				this.$emit('multTimeChenge',obj);
			},
			isClosePopup() {	//自定义弹出层
				this.$emit('isClosePopup');
			},
			
			
		}
	}
</script>

<style scoped>
	.card_model{background-color: #FFFFFF;}
	.card_item{border-bottom: 6upx solid #f8f8f8;padding: 20upx;}
	.card_item view{color: #333333;}
	.card_item_name{flex-shrink: 0;} 
	.card_item_name view{flex-shrink: 0;}
	.card_item_text{flex: 1;position: relative;}
	.card_item_text input,.card_item_text picker,.card_item_text picker-view{font-weight: normal;flex: 1;}
	.card_item_but{flex-shrink: 0;padding: 10px;margin-left: 20upx;}
	/* #ifdef H5 */
	.uni-button{line-height: 1;}
	.card_item_but{font-size: 30upx;flex-shrink: 0;background-color: #5bd1b9!important;}
	.agreementCheckbox{padding: 40upx 0;}
	/* checkbox/radio  重构原生样式 */
	.radio{color: #505050;}
	radio .wx-radio-input{border-radius: 20%;}
	/* .checkbox{color: #505050;} */
	checkbox .wx-checkbox-input{border-radius: 20%;}
	/* checkbox[checked] .wx-checkbox-input{background-color: #5BD1B9;} */
	button[disabled]{color: rgba(255, 255, 255, 0.6)!important;}
	.uni-input{padding: 0;height: 50upx;}
	
	/* 自定义 textarea 样式 */
	
	
	/* end---------------------- */
	/*  自定义 弹出层样式 */
	.Custom_picker{position: fixed;bottom: 0;left: 0;width: 100%;top: 0;z-index: 10;}
	.Custom_picker_mask{width: 100%;height: 100%;background-color: rgba(0,0,0,0.2);}
	.Custom_picker_content{height: 40%;position: absolute;left: 0;width: 100%;bottom: -400px;background-color: #FFFFFF;transition: bottom .5s; }
	picker-view{height: 85%;}
	picker-view .item{text-align: center;line-height: 34px;}
	.cancel,.confirm{font-size: 30upx;line-height: 1.5;margin: 0 10upx;padding: 20upx 10upx;font-weight: 500;}
	.confirm{color: #3CA4F9;}
	.uni-padding-wrap{border-bottom: 4upx solid #E5E5E5;}
	./* uni-title{position: relative;}
	.uni-title view{flex: 0 0 20%;text-align: center;margin-right: 5%;white-space: nowrap;overflow: hidden;border-bottom: 2upx solid #E5E5E5;}
	.uni-title view:last-child{margin: 0;} */
	/*  自定义 弹出层(END)  */
	/* ----------添加诊所页面样式-------------- */
	.navTitle{
		color: #5BD1B9;
		font-weight: 600;
		border-left: 4px solid #5BD1B9;
		font-size: 36upx;
		line-height: 1;
		padding: 0 20upx;
		margin: 30upx;
	}
	/* -------END------- */
	/* #endif */
	
	
</style>
